<template>
    <el-dialog
            :visible="this.$store.state.showOrderSearchDialog"
            class="searchOrderDialog"
            width="100%"
            @close="closeDialog"
            @open="openDialog"
            :append-to-body="true"
            center close-on-click-modal>

        <div class="status-container ng-star-inserted">
            <div class="box b0" @click="searchByStatus(0)">
                <div class="title">{{$t('等待接受')}}</div>
                <div class="number">{{statistics[0]}}</div>
            </div>
            <div class="box b1" @click="searchByStatus(1)">
                <div class="title">{{$t('正在处理')}}</div>
                <div class="number">{{statistics[1]}}</div>
            </div>
            <div class="box b2" @click="searchByStatus(2)">
                <div class="title">{{$t('完成')}}</div>
                <div class="number">{{statistics[2]}}</div>
            </div>
            <div class="box b3" @click="searchByStatus(3)">
                <div class="title">{{$t('拒绝')}}</div>
                <div class="number">{{statistics[3]}}</div>
            </div>
        </div>
        <span>{{$t('筛选服务')}} ({{$t('可选')}})</span>
        <el-select class="dialog-select" v-model="serviceId" clearable filterable :placeholder="$t('选择_搜索服务')">
            <el-option-group class="no-divider" v-for="group in serviceList" :key="group.parent" :label="group.parent">
                <el-option v-for="item in group.options" :key="item.serviceId" :label="item.label" :value="item.serviceId"
                           :style="{width:selectOptionWidth}"/>
            </el-option-group>
        </el-select>
        <span >{{$t('筛选状态')}} ({{$t('可选')}})</span>
        <el-select v-model="statValue" clearable :placeholder="$t('选择状态')">
            <el-option v-for="item in statsOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <span>{{$t('订单输入')}} ({{$t('IMEI等')}}) ({{$t('可选')}})</span>
        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" :placeholder="$t('一行一个')" v-model="imeis"/>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="search" style="width: 100%">{{$t('搜索')}}</el-button>
  </span>
    </el-dialog>
</template>

<script>

import apiService from "@/api/apiService";

export default {
    props: {
        pageSize: {type: Number, default: 5},
        statsOptions: {type: Array},
        serviceList: {type: Array}
    },
    model: {
        event: ['dialogSearch'],
    },
    data() {
        return {
            statistics: {0:0,1:0,2:0,3:0},
            serviceId: '',
            statValue: '',
            imeis: '',
            selectOptionWidth: ''
        }
    },
    mounted() {
        window.addEventListener('resize', this.resizeSelect);
        this.$nextTick(function () {
            apiService.get("/order-statistic").then(res => {
                res.data.forEach(s => {
                    this.statistics[s.status] = s.total
                })
            })
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizeSelect);
    },
    methods: {
        resizeSelect() {
            this.$nextTick(()=> {
                this.selectOptionWidth = this.$el.querySelector('.dialog-select').offsetWidth+'px !important'
            })
        },
        resetForm() {
            this.serviceId = ''
            this.statValue = ''
            this.imeis = ''
        },
        closeDialog() {
            this.changeDialogState(false);
            this.resetForm()
        },
        openDialog() {
            this.resizeSelect()
            this.changeDialogState(true);
        },
        changeDialogState(state) {
            this.$store.commit('setShowOrderSearchDialog', state)
        },
        search() {
          let req = this.orderSearchReq();
          this.$emit('dialogSearch', req)
          this.closeDialog()
        },
        searchByStatus(val) {
            let req = this.orderSearchReq();
            req.apResult=val
            this.$emit('dialogSearch', req)
            this.closeDialog()
        },
        orderSearchReq(){
            return  {
                imei:this.imeis,
                serviceId:this.serviceId,
                apResult:this.statValue,
                orderFiled: 'update_time',
                orderBy: 'desc',
                page: 1,
                pageSize: this.pageSize
            };
        }
    }
}

</script>
<style>
.searchOrderDialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.searchOrderDialog .el-dialog--center {
    text-align: center;
    max-width: 1000px;
    position: fixed;
    margin-bottom: 0;
    bottom: 0;
}
.status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 1rem;
}

.box.b0 {
    border: 3px solid #e69912;
}

.box.b1 {
    border: 3px solid #3098de
}

.box.b2 {
    border: 3px solid #89c40e
}

.box.b3 {
    border: 3px solid #e54a3c;
}

.box {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 .1rem;
    height: 100%;
    width: fit-content;
    min-width: 32px;
    border: 3px solid #ccc;
    border-radius: 3px;
    padding: 3px 4px;
}

.title {
    font-size: 12px;
    text-align: center;
    margin-bottom: 5px;
}

.number {
    font-size: 20px;
    text-align: center;
    width: 100%;
    min-width: 3rem;
}

.no-divider:not(:last-child)::after {
    content: none !important; /* 移除组之间的分割线 */
}

.no-divider:not(:last-of-type) {
    padding-bottom: 0;
}

.el-select-group__title {
    margin: 0;
    /*padding: .50rem 1.25rem;*/
    color: #343a40;
    background: #ffffff;
    font-weight: 600;
    font-size: smaller;
}

.el-select {
    width: 100%;
    max-width: 1000px;
    /*margin-bottom: 1.5rem*/
}
</style>